<template>
  <div class="app-container">
    <GuaranteeValuation ref="openValuation" @refresh="refresh"></GuaranteeValuation>
    <GuaranteePrice ref="openGuaranteePrice" @refresh="refresh"></GuaranteePrice>
    <el-form @submit.native.prevent :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="120px" v-show="showSearch" :label-position="labelPosition">
      <el-form-item label="客户" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入客户名称"
          clearable
           @keyup.enter.native="enterClick"
        />
      </el-form-item>
      <el-form-item >
        <el-checkbox v-model="queryParams.all" label="显示所有用户" true-label="1" @change="getList"></el-checkbox>
        <el-checkbox v-model="queryParams.wsz" label="未设置货物估值" true-label="12" @change="getList"></el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="mt20 mb20 ml10">
      <el-descriptions>
        <el-descriptions-item label="担保总金额">{{ storageGuaranteeSummary.sumJine}}</el-descriptions-item>
        <el-descriptions-item label="货物估值总金额">{{ storageGuaranteeSummary.sumZje}}</el-descriptions-item>
        <el-descriptions-item label="剩余可用金额">{{ storageGuaranteeSummary.sumSyje}}</el-descriptions-item>
      </el-descriptions>
    </div>
    
    <el-table
      v-loading="loading"
      :data="storageGuaranteeList"
    >
      <af-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250" fixed="left">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleGuaranteePrice(scope.row)"
            v-hasPermi="['zhcloud:hwdb:list']"
          >担保金额</el-button>
          <el-button
            v-if="scope.row.parentId != 0"
            size="mini"
            type="text"
            @click="handleGoodsDetails(scope.row)"
            v-hasPermi="['zhcloud:hwdb:list']"
          >货物详情</el-button>
            <el-button
            v-if="scope.row.parentId != 0"
            size="mini"
            type="text"
            @click="handleValuation(scope.row)"
            v-hasPermi="['zhcloud:hwdb:list']"
          >设置估价</el-button>
        </template>
      </af-table-column>
      <af-table-column prop="allName" label="客户" fixed="left"></af-table-column>
      <af-table-column prop="jine" label="担保总金额" ></af-table-column>
      <af-table-column prop="bxbl" label="保险比率"></af-table-column>
      <af-table-column prop="scx" label="最终锁仓线"></af-table-column>
      <af-table-column prop="jine2" label="提醒金额"></af-table-column>
      <af-table-column prop="zje" label="货物估值总金额"></af-table-column>
      <af-table-column prop="syje" label="剩余可用金额"></af-table-column>
      <af-table-column prop="zt" label="状态"></af-table-column>
    </el-table>
     <pagination
        v-show="total>0"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        @pagination="getList"
      />
  </div>

</template>

<script>
import { ListStorageGuarantee } from "@/api/storage/guarantee";
import GuaranteeValuation from "./guaranteeValuation.vue"
import GuaranteePrice from "./guaranteePrice.vue"
import { priceFormat } from "@/utils/amount"

export default {
  name: "Guarantee",
  components: { GuaranteeValuation, GuaranteePrice },
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      //对齐
      labelPosition: "right",
      //表格加载
      loading: true,
      // 表单校验
      rules: {
      },
      // 查询参数
      queryParams: {
        name: "",
        all: "",
        wsz: ""
      },
      // 货物担保列表
      storageGuaranteeList: [],
      //汇总
      storageGuaranteeSummary: {
        sumJine:"",
        sumSyje:"",
        sumZje:""
      },
      //页数
      pageSize: 10,
      //页码
      pageNum:1,
      // 总条数
      total: 0,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询部门列表 */
    getList() {
      this.loading = true
      ListStorageGuarantee(this.queryParams, {pageNum:this.pageNum, pageSize:this.pageSize}).then(response => {
        const data = response.rows
        for(let i in data) {
          data[i].jine = priceFormat(parseFloat(data[i].jine))
          data[i].scx = priceFormat(parseFloat(data[i].scx))
          data[i].jine2 = priceFormat(parseFloat(data[i].jine2))
          data[i].zje = priceFormat(parseFloat(data[i].zje))
          data[i].syje = priceFormat(parseFloat(data[i].syje))
        }
        let storageGuaranteeSummary = {
          sumJine: 0.00,
          sumSyje: 0.00,
          sumZje: 0.00,
        }
        if(data && data.length) {
          storageGuaranteeSummary = {
            sumJine: priceFormat(data[0].sumJine),
            sumSyje: priceFormat(data[0].sumSyje),
            sumZje: priceFormat(data[0].sumZje),
          }
        }
        this.storageGuaranteeSummary = storageGuaranteeSummary
        this.storageGuaranteeList = data
        this.total = response.total;
        this.loading = false
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.pageNum = 1
      this.getList();
    },
    
    /** 打开货物详情窗口 */
    handleGoodsDetails(row) {
      const data = JSON.parse(JSON.stringify(row))
      this.$router.push({path:"/storage/guarantee/guaranteeGoodsDetails", query:data})
    },

    /** 打开保险比率窗口*/
    handleGuaranteeRate(row) {
      this.$refs.openGuaranteeRate.open(row)
    },

    /**打开担保金额窗口 */
    handleGuaranteePrice(row) {
      this.$refs.openGuaranteePrice.open(row)
    },

    /**打开设置估价窗口 */
    handleValuation(row) {
      this.$refs.openValuation.open(row)
    },
       /**enter键触发 */
    enterClick(e) {
      this.getList()
    },

    /** 刷新数据*/
    refresh() {
      this.getList()
    },

     /** 重置按钮操作 */
    resetQuery() {
      this.reset()
      this.getList()
    },
    reset() {
      Object.assign(this.$data, this.$options.data())
    },
  }
};
</script>
